<template>
  <div class="construction-overview-wrapper">
    <div class="top">
      <tabItem2
        v-for="(item, index) of topConfig"
        :key="index"
        :config="item"
        :value="dataTop[item.value]"
      />
    </div>
    <div class="middle">
      <div class="part">
        <div class="part-title">政府投资项目</div>
        <div class="part-content">
          <div class="tabs1">
            <tabItem
              v-for="(item, index) of configZFXM"
              :key="index"
              :config="item"
              :value="dataZFXM[item.value]"
            />
          </div>
          <div class="chart1">
            <echartDiv :options="optionsZFXMWC" />
          </div>
          <div class="chart2">
            <echartDiv :options="optionsZFXM" />
          </div>
        </div>
      </div>
      <div class="part">
        <div class="part-title">企业投资项目</div>
        <div class="part-content">
          <div class="tabs1">
            <tabItem
              v-for="(item, index) of configQYXM"
              :key="index"
              :config="item"
              :value="dataQYXM[item.value]"
            />
          </div>
          <div class="chart1">
            <echartDiv :options="optionsQYXMWC" />
          </div>
          <div class="chart2">
            <echartDiv :options="optionsQYXM" />
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="part">
        <div class="part-title">安全报告</div>
        <div class="part-content">
          <div class="tabs2">
            <tabItem1
              v-for="(item, index) of configAQBG"
              :key="index"
              :config="item"
              :value="dataAQBG[item.value]"
            />
          </div>
          <div class="chart3">
            <echartDiv :options="optionsAQBG" />
          </div>
          <div class="tip">
            <div class="tip-label">审核通过报告数</div>
            <div class="tip-content">
              <div class="tip-content-val">
                {{ dataAQBG.tgs }}
              </div>
              条
            </div>
          </div>
        </div>
      </div>
      <div class="part">
        <div class="part-title">巡查项目</div>
        <div class="part-content">
          <div class="tabs2">
            <tabItem1
              v-for="(item, index) of configXCXM"
              :key="index"
              :config="item"
              :value="dataXCXM[item.value]"
            />
          </div>
          <div class="chart3">
            <echartDiv :options="optionsXCXM" />
          </div>
          <div class="tip">
            <div class="tip-label">待整改巡查记录</div>
            <div class="tip-content">
              <div class="tip-content-val">
                {{ dataXCXM.dzg }}
              </div>
              条
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echartDiv from '@/components/echart/index'
import tabItem from './tabItem.vue'
import tabItem1 from './tabItem1.vue'
import tabItem2 from './tabItem2.vue'
import {
  queryProject,
  querySecurity,
  queryInspection
} from '@/api/projectOverview'
export default {
  components: {
    echartDiv,
    tabItem,
    tabItem1,
    tabItem2
  },
  data() {
    return {
      // 顶部统计
      topConfig: [
        {
          label: '项目总数',
          value: 'projectTotal',
          unit: '个',
          icon: require('@/assets/img/overview/js-top-icon1.png'),
          bg: require('@/assets/img/overview/js-top-bg1.png')
        },
        {
          label: '项目总投资额',
          value: 'amountTotal',
          unit: '万元',
          icon: require('@/assets/img/overview/js-top-icon2.png'),
          bg: require('@/assets/img/overview/js-top-bg2.png')
        },
        {
          label: '在建项目',
          value: 'buildTotal',
          unit: '个',
          icon: require('@/assets/img/overview/js-top-icon3.png'),
          bg: require('@/assets/img/overview/js-top-bg3.png')
        },
        {
          label: '完工项目',
          value: 'finishTotal',
          unit: '个',
          icon: require('@/assets/img/overview/js-top-icon4.png'),
          bg: require('@/assets/img/overview/js-top-bg4.png')
        }
      ],
      dataTop: {
        projectTotal: 0,
        amountTotal: 0,
        buildTotal: 0,
        finishTotal: 0
      },

      // 政府项目
      configZFXM: [
        {
          label: '项目总数',
          value: 'xmzs',
          unit: '个',
          icon: require('@/assets/img/overview/kc-left-icon1.png'),
          bg: ''
        },
        {
          label: '项目总投资',
          value: 'xmztz',
          unit: '万元',
          icon: require('@/assets/img/overview/js-mid-icon1.png'),
          bg: ''
        }
      ],
      dataZFXM: {
        xmzs: 0,
        xmztz: 0
      },
      optionsZFXMWC: null,
      optionsZFXM: null,

      // 企业项目
      configQYXM: [
        {
          label: '项目总数',
          value: 'xmzs',
          unit: '个',
          icon: require('@/assets/img/overview/kc-left-icon1.png'),
          bg: '#54B3F1'
        },
        {
          label: '项目总投资',
          value: 'xmztz',
          unit: '万元',
          icon: require('@/assets/img/overview/js-mid-icon1.png'),
          bg: '#54B3F1'
        }
      ],
      dataQYXM: {
        xmzs: 0,
        xmztz: 0
      },
      optionsQYXMWC: null,
      optionsQYXM: null,

      // 安全报告
      configAQBG: [
        {
          label: '安全报告项目数',
          value: 'xms',
          unit: '个',
          icon: '',
          bg: ''
        },
        {
          label: '安全报告记录总数',
          value: 'jls',
          unit: '条',
          icon: '',
          bg: ''
        },
        {
          label: '安全报告问题总数',
          value: 'wts',
          unit: '个',
          icon: '',
          bg: ''
        }
      ],
      dataAQBG: {
        xms: 0,
        jls: 0,
        wts: 0,
        tgs: 0
      },
      optionsAQBG: null,

      // 巡查项目
      configXCXM: [
        {
          label: '巡查项目数',
          value: 'xms',
          unit: '个',
          icon: '',
          bg: ''
        },
        {
          label: '巡查记录总数',
          value: 'jls',
          unit: '条',
          icon: '',
          bg: ''
        },
        {
          label: '巡查问题总数',
          value: 'wts',
          unit: '个',
          icon: '',
          bg: ''
        }
      ],
      dataXCXM: {
        xms: 0,
        jls: 0,
        wts: 0,
        dzg: 0
      },
      optionsXCXM: null
    }
  },
  mounted() {
    this.getStatisticsXM()
    this.getStatisticsAQBG()
    this.getStatisticsXCXM()
  },
  methods: {
    // 政府项目
    getStatisticsXM() {
      queryProject().then((res) => {
        if (res.success) {
          // 顶部
          this.dataTop = res.data.allProjectInfo
          // 政府
          this.dataZFXM = {
            xmzs:
              res.data.governProjectInfo.projectTotal || 0,
            xmztz:
              res.data.governProjectInfo.amountTotal || 0
          }
          // 完成情况
          this.optionsZFXMWC = this.getChartDataPie1([
            {
              label: '未完成',
              num:
                res.data.governProjectInfo.buildTotal || 0
            },
            {
              label: '已完成',
              num:
                res.data.governProjectInfo.finishTotal || 0
            }
          ])
          // 项目
          this.optionsZFXM = this.getChartDataXMRight(
            res.data.governItemInfo
          )
          // 企业
          this.dataQYXM = {
            xmzs:
              res.data.companyProjectInfo.projectTotal || 0,
            xmztz:
              res.data.companyProjectInfo.amountTotal || 0
          }
          // 完成情况
          this.optionsQYXMWC = this.getChartDataPie1([
            {
              label: '未完成',
              num:
                res.data.companyProjectInfo.buildTotal || 0
            },
            {
              label: '已完成',
              num:
                res.data.companyProjectInfo.finishTotal || 0
            }
          ])
          // 项目
          this.optionsQYXM = this.getChartDataXMRight(
            res.data.companyItemInfo
          )
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 安全报告
    getStatisticsAQBG() {
      querySecurity().then((res) => {
        if (res.success) {
          this.dataAQBG = {
            xms: res.data.projectTotal || 0,
            jls: res.data.recordTotal || 0,
            wts: res.data.problemTotal || 0,
            tgs: res.data.passTotal || 0
          }
          // 审核通过
          this.optionsAQBG = this.getChartDataPie2(
            (
              (res.data.passTotal / res.data.projectTotal) *
              100
            ).toFixed(0) || 0,
            '#0AD87E'
          )
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 巡查项目
    getStatisticsXCXM() {
      queryInspection().then((res) => {
        if (res.success) {
          this.dataXCXM = {
            xms: res.data.projectTotal || 0,
            jls: res.data.recordTotal || 0,
            wts: res.data.problemTotal || 0,
            dzg: res.data.checkTotal || 0
          }
          // 审核通过
          this.optionsXCXM = this.getChartDataPie2(
            res.data.projectTotal
              ? (
                  (res.data.checkTotal /
                    res.data.projectTotal) *
                  100
                ).toFixed(0)
              : 0,
            '#3498DB'
          )
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 政府投资项目/企业投资项目
    getChartDataXMRight(data) {
      let option = {
        grid: {
          top: 55,
          bottom: 40,
          left: 50,
          right: 70
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          right: '20',
          top: '0'
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              show: false,
              lineStyle: {
                color: '#497FA333'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#A7ADB5',
              fontSize: 12
            },
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            name: '单位（个）',
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#A7ADB5',
              fontSize: 12
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#497FA333'
              }
            },
            nameTextStyle: {
              color: '#A7ADB5',
              fontSize: 12
            }
          },
          {
            name: '单位（万元）',
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#A7ADB5',
              fontSize: 12
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#497FA333'
              }
            },
            nameTextStyle: {
              color: '#A7ADB5',
              fontSize: 12
            }
          }
        ],
        series: [
          {
            name: '项目数',
            type: 'bar',
            barWidth: '22',
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: '#419EDC'
                },
                {
                  offset: 1,
                  color: '#5AB9F8'
                }
              ]
            ),
            data: []
          },
          {
            name: '投资额',
            type: 'line',
            yAxisIndex: 1,
            data: [],
            symbol: 'circle',
            symbolSize: 7,
            lineStyle: {
              color: '#F8BD70',
              width: 2
            },
            itemStyle: {
              color: '#F8BD70',
              borderWidth: 1,
              borderColor: '#ffffff'
            }
          }
        ]
      }
      const xAxisData = []
      const seriesData1 = []
      const seriesData2 = []
      data.forEach((item) => {
        xAxisData.push(item.type)
        seriesData1.push(item.projectTotal || 0)
        seriesData2.push(item.amountTotal || 0)
      })
      option.xAxis[0].data = xAxisData
      option.series[0].data = seriesData1
      option.series[1].data = seriesData2
      return option
    },
    // 完成情况
    getChartDataPie1(data) {
      let total = 0
      const seriesData1 = []
      const seriesData2 = []
      for (let index = 0; index < data.length; ++index) {
        const item = data[index]
        seriesData1.push({
          value: item.num,
          name: item.label
          // itemStyle: {
          //   color: color[index]
          // }
        })
        seriesData2.push({
          value: item.num,
          name: item.label,
          itemStyle: {
            // color: color[index],
            opacity: 0.4
          }
        })
        total += item.num
      }
      let option = {
        color: ['#EFD0A4', '#00C2C5'],
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        legend: {
          show: true,
          left: 'center',
          bottom: '18',
          orient: 'vertical',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 18,
          icon: 'circle',
          formatter: (name) => {
            if (data.length) {
              const item = data.filter(
                (item) => item.label === name
              )[0]
              let percent = 0
              if (item.num !== 0 && total !== 0) {
                percent = (
                  (item.num / total) *
                  100
                ).toFixed(2)
              }
              return `{name|${name} }{value| ${item.num}} {unit| 个} {percent| ${percent}%}`
            }
          },
          textStyle: {
            align: 'left',
            verticalAlign: 'middle',
            rich: {
              name: {
                color: '#4c565c',
                fontSize: 14,
                lineHeight: 14
              },
              value: {
                color: '#000000',
                fontSize: 16,
                fontWeight: 500,
                lineHeight: 14
              },
              unit: {
                color: '#4C565C',
                fontSize: 14,
                lineHeight: 14
              },
              percent: {
                color: '#000000',
                fontSize: 14,
                fontWeight: 500,
                lineHeight: 14
              }
            }
          }
        },
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'pie',
            radius: ['52%', '60%'],
            center: ['50%', '34%'],
            hoverAnimation: false,
            z: 10,
            data: [],
            label: {
              show: false,
              color: '#4C565C',
              fontSize: 14,
              formatter: '{d}%'
            },
            labelLine: {
              show: false
            },
            emphasis: {
              labelLine: {
                show: true
              }
            }
          },
          {
            type: 'pie',
            radius: ['46%', '52%'],
            center: ['50%', '34%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            data: [],
            labelLine: {
              show: false
            }
          }
        ]
      }

      option.series[0].data = seriesData1
      option.series[1].data = seriesData2
      return option
    },
    // 安全报告/巡查项目
    getChartDataPie2(data, color) {
      let option = {
        title: {
          text: data + '%',
          textStyle: {
            color: '#000000',
            fontSize: 18
          },
          left: 'center',
          top: 'center'
        },
        tooltip: {
          formatter: '{c}%'
        },
        angleAxis: {
          max: 100,
          clockwise: true, // 逆时针
          // 隐藏刻度线
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        polar: {
          center: ['50%', '50%'],
          radius: ['65%', '80%']
        },
        series: [
          {
            type: 'bar',
            data: [data],
            showBackground: true,
            backgroundStyle: {
              color: '#ECF1F9'
            },
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 30,
            itemStyle: {
              color: color
            }
          }
        ]
      }

      return option
    }
  }
}
</script>
<style lang="scss">
.construction-overview-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  .top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    margin-bottom: 18px;
  }
  .middle {
    width: 100%;
    height: 55%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
    padding-bottom: 18px;
  }
  .bottom {
    width: 100%;
    height: 32%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .part {
    width: calc(50% - 8px);
    height: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    &-title {
      width: 100%;
      height: 51px;
      color: #4c565c;
      font-size: 16px;
      font-weight: 500;
      position: relative;
      box-sizing: border-box;
      padding: 0 0 0 35px;
      line-height: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      border-bottom: 1px solid #f1f1f1;
      &::before {
        content: '';
        width: 4px;
        height: 16px;
        background: linear-gradient(
          180deg,
          #40ebff,
          #bcf8ff
        );
        position: absolute;
        top: 19px;
        left: 24px;
      }
    }
    &-content {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: calc(100% - 51px);
    }
  }
  .tabs1 {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0px 20px 0 20px;
  }
  .tabs2 {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 12px 0;
  }
  .chart1 {
    width: 40%;
    height: calc(100% - 110px);
  }
  .chart2 {
    width: 60%;
    height: calc(100% - 110px);
  }
  .chart3 {
    width: 27%;
    height: 100%;
  }
  .tip {
    width: 23%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    &-label {
      margin-bottom: 14px;
      font-size: 14px;
      line-height: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3c3c3c;
    }
    &-content {
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      font-size: 14px;
      line-height: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #4c565c;
      &-val {
        font-size: 18px;
        line-height: 18px;
        font-family: DIN;
        font-weight: 500;
        color: #000000;
        margin: 0 5px -2px 0;
      }
    }
  }
}
</style>
